const sysSetting = require("../../mock/my-setting.json");
import Vue from 'vue'
import VueRouter from 'vue-router'
import TestD1 from "../views/TestD1";
import RoleManage from "../views/RoleManage";
import Personal from "@/views/Personal";
import SysLayout from "@/components/SysLayout";
import DefaultHome from "@/views/DefaultHome";
import Error from "@/views/Error";
import UserManage from "@/views/UserManage";
import WebSocketTest from "@/components/WebSocketTest";
import ServerMonitor from "@/views/ServerMonitor";
import NProgress from 'nprogress';
// import Auth from "../views/Auth";
import 'nprogress/nprogress.css'
Vue.use(VueRouter)

const routes = [

    {
        path: '/',
        name: 'Auth',
        component: () => import(/* webpackChunkName: "about" */ '../views/Auth.vue'),
        meta:{
            // 页面标题title
            title: '登录页'
        }
    },
    {
        path: '/defaultHome',
        name: 'SysLayout',
        component: SysLayout,
        children: [
            {
                path: '/',
                name: 'defaultHome',
                component: DefaultHome,
                meta:{
                    title: '主页'
                }
            },
            {
                path: '/personal',
                name: 'Personal',
                component: Personal
            },
            {
                path: '/userManage',
                name: 'UserManage',
                component: UserManage,
                meta:{
                    title: '用户管理'
                }
            },
            {
                path: '/testD1',
                name: 'TestD1',
                component:TestD1
            },
            {
                path: '/webSocketTest',
                name: 'WebSocketTest',
                component:WebSocketTest
            },
            {
                path: '/roleManage',
                name: 'RoleManage',
                component:RoleManage,
                meta:{
                    title: '角色管理'
                }
            },
            {
                path: '/serverMonitor',
                name: 'ServerMonitor',
                component:ServerMonitor,
                meta:{
                    title: '服务器监控'
                }
            },
            {
                path: '/testTwo',
                name: 'TestTwo',
                component: () => import(/* webpackChunkName: "about" */ '../views/TestTwo.vue')
            },
            {
                path: '/menuManage',
                name: 'MenuManage',
                component: () => import(/* webpackChunkName: "about" */ '../views/MenuManage.vue'),
                meta:{
                    title: '菜单管理'
                }
            },
            {
                path: '/buttonManage',
                name: 'ButtonManage',
                component: () => import(/* webpackChunkName: "about" */ '../views/ButtonManage.vue'),
                meta:{
                    title: '按钮管理'
                }
            },
            {
                path: '/operationLog',
                name: 'OperationLog',
                component: () => import(/* webpackChunkName: "about" */ '../views/OperationLog.vue'),
                meta:{
                    title: '操作日志'
                }
            },
            {
                path: '/loginLog',
                name: 'LoginLog',
                component: () => import(/* webpackChunkName: "about" */ '../views/LoginLog.vue'),
                meta:{
                    title: '登录日志'
                }
            },
            {
                path: '/tsPlayer',
                name: 'TsPlayer',
                component: () => import(/* webpackChunkName: "about" */ '../views/TsPlayer.vue')
            },
            {
                path: '/m3U8Player',
                name: 'M3U8Player',
                component: () => import(/* webpackChunkName: "about" */ '../views/M3U8Player.vue')
            },
            {
                path: '/mp4Player',
                name: 'Mp4Player',
                component: () => import(/* webpackChunkName: "about" */ '../views/Mp4Player.vue')
            },


        ]
    },
    {
      path: '*',
      name: 'error',
      component:Error
    }
]

const router = new VueRouter({
    // mode: 'history',  //去掉url中的#   history模式的路由
    routes
})
//全局前置守卫
router.beforeEach((to, from, next) => {
    // console.log('即将要进入的目标 路由对象')
    // console.log(to);
    // console.log('当前导航正要离开的路由')
    // console.log(from);
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
        document.title = sysSetting.systemTitle +' | '+  to.meta.title;
    }else {
        document.title = sysSetting.systemTitle;
    }

    if (to.path === '/') {
        //任何情况均可访问login页面
        NProgress.start();
        next();
    } else {
        let loginInfoStr = sessionStorage.getItem('loginInfo');
        if (loginInfoStr !== undefined && loginInfoStr !== null) {
            let token = JSON.parse(loginInfoStr).token;
            if (token !== undefined && token !== null) {
                //有token表示已登录，可以进主页
                if (to.name === 'defaultHome') {
                    NProgress.start();

                    next();
                } else {
                    //其他路由若没有后端权限，则返回登录页面
                    console.log(to.name);
                    let permDataStr = sessionStorage.getItem('permData');
                    if (permDataStr === undefined || permDataStr === null) {
                        next({path: '/'});
                        sessionStorage.clear();
                    } else {
                        let permData = JSON.parse(permDataStr);
                        console.log(permData);
                        if (permData.menuEntitySet === undefined || permData.menuEntitySet === null || permData.menuEntitySet.length === 0) {
                            next({path: '/'});
                            sessionStorage.clear();
                        } else {
                            //findOne
                            const firstRouter = permData.menuEntitySet.find(e => e.routerName === to.name);
                            console.log(firstRouter);
                            if (firstRouter !== undefined && firstRouter !== null) {
                                NProgress.start();

                                next();
                            } else {
                                next('/');


                            }
                        }
                    }
                }


            } else {
                //回去login页
                next({path: '/'});
            }
        } else {
            //回去login页
            next({path: '/'});
        }
    }


    //next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
    //
    // next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
    //
    // next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
    //
    // next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
    //
    // next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调

});

//全局后置钩子
//全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：
router.afterEach((to, from) => {
    console.log('=============================')
    console.log('即将要进入的目标 路由对象')
    console.log(to);
    console.log('当前导航正要离开的路由')
    console.log(from);
    NProgress.done();
});
export default router
